<template>
  <div class="allmessageitem">
      <!-- :data="allmessagelist"  -->
    <el-table 
    :data="allmessagelist.filter(data => !searchtext || data.messagername.toLowerCase().includes(searchtext.toLowerCase()))"
    :default-sort="{prop: 'messagetime', order: 'descending',
                    prop: 'messagername', order: 'descending'}"
    style="width: 100%" height="550">
        <el-table-column type="index" width="50" sortable/>
        <el-table-column prop="messagetime" label="日期" width="180" sortable align="left">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon><Timer /></el-icon>
                    <span style="margin-left: 10px;height:50px;line-height:50px">{{ scope.row.messagetime }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="messagername" label="姓名" width="180" sortable >
            <template #default="scope">
                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                    <template #default>
                        <div>message: {{ scope.row.textarea }}</div>
                    </template>
                    <template #reference>
                        <el-tag>{{ scope.row.messagername }}</el-tag>
                    </template>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="textarea" label="内容" :formatter="formatter"/>
        <el-table-column width="180" align="right">
            <template #header>
                <!-- <el-icon><Search /></el-icon> -->
                <el-input v-model="searchtext" placeholder="search name" class="searchinput"/>
            </template>
            <template #default="scope"> 
                <el-popconfirm title="Are you sure delete?"
                @confirm="handleDelete(scope.$index)">
                    <template #reference>
                        <el-button
                        size="small"
                        type="danger"
                        >Delete</el-button>
                    </template>
                        
            </el-popconfirm>
           </template> 
        </el-table-column>
    </el-table>
    <div class="checkall" @click="drawer = true" v-if="allmessagelist.length > 7">
        <span>点击查看所有 <el-icon><ArrowDown /></el-icon></span>
    </div>
    <!-- 查看所有消息div -->
    <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">open</el-button> -->
    <el-drawer v-model="drawer" title="All Message" direction="btt">
        <el-table :data="allmessagelist" style="width: 100%" height="550">
        <el-table-column prop="messagetime" label="日期" width="180" />
        <el-table-column prop="messagername" label="姓名" width="180" />
        <el-table-column prop="textarea" label="内容" />
        <!-- 删除按钮 -->
        <el-table-column fixed="right" label="操作" width="120">
            <template>
                <el-button link type="warning">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    </el-drawer>
  </div>
</template>

<script>
import {
  ArrowDown,
  Timer,

} from '@element-plus/icons-vue'
import operate from '@/utils/operate'

export default {
    inject: ['reload'],
    name: 'allmessage',
    components: {
        ArrowDown,
        Timer
    },
    data() {
        return {
            allmessagelist: [],
            // allmessagelist: JSON.parse(localStorage.getItem('messagelist')),
            //底部弹窗显示flag
            drawer: false,
            searchtext: '',
        }
    },
    beforeMount() {
        let checkallmessagelist = JSON.parse(localStorage.getItem('messagelist'))
        if(checkallmessagelist){
            this.allmessagelist = checkallmessagelist
        }
    },
    methods: {
        handleDelete(index){
            // console.log(index)
            // 将选中的信息在数组中splice后，更新local中的messagelist数据并重载页面
            this.allmessagelist.splice(index,1)
            localStorage.setItem('messagelist',JSON.stringify(this.allmessagelist))
            operate('admin',"删除信息")
            this.reload()
        },
        formatter(row) {
            return row.textarea
        },
    },
}
</script>

<style>
 .allmessageitem{
    width: 840px;
    height: 650px;
    background-color: #fff;
    border-radius: 8px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
 }
 .el-table {
     margin-top: 10px;
     line-height: 40px;
 }
 .checkall {
     width: 100%;
     /* background-color: green; */
     height: 40px;
     line-height: 40px;
     text-align: center;
     color: #ccc;
 }
 .el-input {
     /* width: 150px;
     margin-left: -20px; */
 }
</style>